<template>
  <div class="VueCountainer"
  :class="{'isLoading':loadAni.timeToload===true}">
    <transition name="loading">

      <div class="loadingAni no-copy" v-show="loadAni.timeToload">
        <div class="systemLogo"><img class="loadingIcon" src="/systemImage/Immortality.png" alt="Logo"></div>
        <div class="loadingText">
          {{ loadAni.loadingMessage }}
          <immDivSpinner turnSpeed="4"/>
        </div>
    </div>

    </transition>
    
    
  <RouterView/>
  </div>
</template>

<script lang="ts" setup>
import immDivSpinner from './components/imm-divSpinner.vue';
import {loadingStatsStore} from './stores/statsManageStore'

const loadAni=loadingStatsStore();

</script>

<style>
  .isLoading{
    pointer-events: none;
  }
</style>

<style scoped>

.no-copy {
  /* 禁止文本选择（兼容各浏览器） */
  -webkit-user-select: none; /* Safari、Chrome 等 */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE、Edge */
  user-select: none; /* 标准语法 */
  
}

.VueCountainer{
  width: 100%;
  height: 100%;
}

.loadingAni{
  width: 100%;
  height: 100%;
  position: fixed;
  background-color: rgba(0, 0, 0,0.95);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  pointer-events: none;
  z-index: 20;
  transition: all 0.4s ease;
}

.loadingText{
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: -5%;
  color: rgb(255, 255, 255);
  font-size: 32px;
  font-family: Arial, Helvetica, sans-serif;
  text-shadow: 0 0 12px rgb(255, 255, 255);
  gap: 32px;
}

.systemLogo{
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%,-50%);
  
}

.loadingIcon{
  width: 70%;
  opacity: 20%;
}

/* 进入过渡的“活跃状态” + 离开过渡的“活跃状态”：定义过渡时长和属性 */
.loading-enter-active,
.loading-leave-active {
  transition: all 0.4s ease; /* 过渡所有可渐变属性，时长 0.4s */
}

/* 进入的起始状态（隐藏 → 显示的初始样式） + 离开的结束状态（显示 → 隐藏的最终样式） */
.loading-enter-from,
.loading-leave-to {
  opacity: 0; /* 透明度从 0 变到 1（渐变核心） */
  visibility: hidden; /* 隐藏时不占位置，且配合 opacity 过渡 */ /* 可选：加个轻微缩放，过渡更自然 */
}
</style>